<template>
  <div class="box">
    <p>子组件的渲染区域</p>
    <span>{{ num }}</span>
    <!-- <p>{{ $attrs.msg }}</p> -->
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  // Vue推荐使用 props 接收父组件传输的数据
  props: ['msg'],
  data() {
    return {
      num: 100
    }
  },
  mounted() {
    // 能访问到父组件传输过来的数据
    console.log('子组件', this.$attrs.msg)
  }
}
</script>

<style lang="less" scoped>
  .box {
    width: 300px;
    height: 300px;
    margin: 20px 0;
    background-color: #ccc;
  }
</style>
